<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/table.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/bootstrap/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/select2/css/select2.css}" media="all"/>

    <style>
        h2{
            margin: 0;
        }
        .blocks{
            display: flex;
            flex-direction: column;
            width: 20rem;
            height: 6rem;
        }
        .blockout{
            display: flex;
            justify-content: space-between;
            margin: 1.5rem 0;
            padding: 0 1rem;
        }
        #auditType{
            display: inline-block;
            min-width: 6rem;
            height: 3rem;
            background-color: #409EFF;
            border-radius: 4px;
            color: white;
            text-align: center;
            line-height: 3rem;
        }
        input[type="text"]:disabled{
            background-color: #EEF1F6;
        }
        input[type="text"]{
            height: 3rem;
        }
        #suppplierDetail{
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-fluid larry-wrapper" id="StandardVUE">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <div class="layui-collapse" lay-filter="test">
                    <form id="form1" class="layui-form layui-form-pane" action="">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">发运订单表头</h2>
                            <div id="orderDetail" class="layui-colla-content layui-show" style="border-bottom: 2px solid #C5C5C5">
                                <div class="blockout">
                                    <div class="blocks">
                                        <label>PO编号</label>
                                        <div class="layui-input-inline" id="bh">
                                            <input th:value="${bh}"
                                                   name="fybh"
                                                   id="fybh"
                                                   autocomplete="off"
                                                   class="layui-input"
                                                   readonly
                                                   style="background-color: #EEF1F6;"/>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>优先级</label>
                                        <div class="layui-input-inline">
                                            <select name="yxj" lay-filter="aihao" class="changeLx">
                                                <option value="1" selected="">1</option>
                                                <option value="2" >2</option>
                                                <option value="3" >3</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>PO类型</label>
                                        <div class="layui-input-inline">
                                            <select type="text"
                                                    lay-filter="POtype"
                                                    lay-verify="required"
                                                    id="POtype"
                                                    name="POtype"
                                                    placeholder="PO类型">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="blocks">
                                        <label>客户编号</label>
                                        <div class="layui-input-inline">
                                            <select type="text"
                                                    lay-filter="clientBh"
                                                    lay-verify="required"
                                                    id="clientBh"
                                                    name="clientBh"
                                                    placeholder="客户编号">
                                            </select>
                                            <span hidden id="warehouseSpan"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="blockout">
                                    <div id="suppplierDetail">
                                        <div class="blockout">
                                            <input type="hidden" id="khid" name="khid">
                                            <div class="blocks">
                                                <label>客户名称</label>
                                                <span id="supName" name="khmc"></span>
                                            </div>
                                            <div class="blocks">
                                                <label>联系电话</label>
                                                <span id="supMan" name="lxrdh"></span>
                                            </div>
                                            <div class="blocks">
                                                <label>联系人姓名</label>
                                                <span id="supPhone1" name="lxrxm"></span>
                                            </div>
                                            <div class="blocks">
                                                <label>客户地址</label>
                                                <span id="supPhone2" name="khdz"></span>
                                            </div>
                                            <div class="blocks">
                                                <label>省</label>
                                                <span id="supFaxse" name="sheng"></span>
                                            </div>
                                            <div class="blocks">
                                                <label>市</label>
                                                <span id="supState" name="shi"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="blockout">
                                    <div class="blocks" style="width: 69%">
                                        <label>备注</label>
                                        <div class="layui-input-inline">
                                            <input type="text" class="layui-input" name="datailRemark" id="datailRemark"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <h2 class="layui-colla-title">新增快速出库明细</h2>
                                    <div id="ksorderDetail" class="layui-colla-content layui-show" style="border-bottom: 2px solid #C5C5C5">
                                        <div class="blockout">
                                            <div class="blocks">
                                                <label>货品编号</label>
                                                <div class="layui-input-inline" id="hpbh1">
                                                    <input type="text" name="hpbh" id="hpbh" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="blocks">
                                                <label>货品名称</label>
                                                <div class="layui-input-inline" id="hpmc1">
                                                    <input type="text" name="hpmc" id="hpmc" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="blocks">
                                                <label>货品批次</label>
                                                <div class="layui-input-inline" id="hppc1">
                                                    <input type="text" name="hpph" id="hpph" autocomplete="off" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="blocks">
                                                <label>生产日期</label>
                                                <div class="layui-input-inline" id="qq">
                                                    <input type="text" class="layui-input" id="scrq" name="hpscrq" placeholder="请选择时间范围" />
                                                </div>
                                            </div>
                                            <div class="blocks">
                                                <label>搜索</label>
                                                <div class="layui-inline inline-search-btn">
                                                    <a class="layui-btn layui-btn-normal" data-type="reload">搜索</a>
                                                </div>
                                            </div>
                                        </div>

                                            <div class="layui-col-xs24">
                                                <table data-height="300" data-single-select="false"	 id="table"></table>
                                            </div>

                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">快速出库明细</h2>
                                    <div id="outDetail" class="layui-colla-content layui-show" style="border-bottom: 2px solid #C5C5C5">
                                                <div class="pro">
                                                    <table id="table1" data-single-select="false"  class="table text-nowrap"></table>
                                                </div>

                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin: 2rem 0;">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                                    </div>
                                </div>
                                <input type="hidden" id="hpscrq_start" name="hpscrq_start">
                                <input type="hidden" id="hpscrq_end" name="hpscrq_end">
                            </div>
                            </div>
                    </form>
                </div>
            </section>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>

    var indexs = 0;
    var supplierInf;
    var POtypeData;
    $(function () {
        // 查询客户编号
        $.ajax({
            url: '/zxsdwms/wmsshipmentorder/getCusInfo',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            async: false,
            data:JSON.stringify({}) ,
        }).then((resolve) => {
            supplierInf = resolve;
        var optionInf = optionRendering(resolve, 'khbh', 'khbh');
        // 渲染客户编号的<option>
        $('#clientBh').append(optionInf);
    });


        // 查询Po类型的<option>
        $.ajax({
            url: '/zxsdwms/wmsshipmentorder/getPoLx',
            type: 'POST',
            dataType: 'json',
            data: JSON.stringify({}),
            contentType: 'application/json',
            async: false,
        }).then((resolve) => {
            var optionInf = optionRendering(resolve, 'id', 'ddlx');
        POtypeData = resolve;
        // 渲染Po类型的<option>
        $('#POtype').append(optionInf);
    });
    })

    // option渲染方法
    function optionRendering(data, value, text) {
        var optionInf = '<option value="">请选择</option>';
        data.forEach(function (item) {
            optionInf += '<option value="'+ item[value] +'">'+ item[text] +'</option>';
        })
        return optionInf;
    }

    function returnpage() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }

    function toFixeds (data) {
        var str = "";
        if (data) {
            data = data.toString();
            if (data.indexOf('.') < 0) {
                str = data;
            } else {
                str = data.substring(0, data.indexOf('.') + 3);
            }
            return parseFloat(str);
        }
    }

    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,laydate = layui.laydate
            ,zzpValidation = layui.zzpValidation
            ,$ = layui.jquery;
        window.operateEvent ={
            "click .deleteRow": function (e, value, row, index) {//删除
                var tabledata = $table.bootstrapTable('getData');
                console.info("删除行");
                console.info(row);
                var id = [];
                id.push(row.hpkcid);
                console.log(id);
                $table1.bootstrapTable('remove', {field: 'hpkcid', values: id});
                //$table1.bootstrapTable('load', tabledata);
            },
        }
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination:true,
            showColumns: false,
            url: '/wmsquickexitdetailed/searchKc',
            columns: [
                 {
                    field: 'hpbh',
                    title: '货品编号',
                },{
                    field: 'hpmc',
                    title: '货品名称'
                },{
                    field: 'hpph',
                    title: '货品批次'
                },{
                    field: 'hpscrq',
                    title: '生产日期',
                },{
                    field: 'dwms',
                    title: '单位',
                },{
                    field: 'kydsl',
                    title: '库存数量',
                },{
                    field: 'show_kwid',
                    title: '库位',

                },{
                    field: 'zysl',
                    title: '出库数量',
                    formatter: operateFormatterNumber,
                }],
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            },
            onDblClickRow: function (row) {
//                alert(1111);
                var data = $table1.bootstrapTable('getData');
                var returnrows = $.map(data,function (rowdata) {
                    if(rowdata.hpkcid==row.hpkcid){
                        return rowdata.hpkcid;
                    }
                })
                if(returnrows.length>0){
                    alert("已存在不能重复添加");
                }else{
                    //双击添加行
//                    $table.bootstrapTable('append', row);
//                    alert('else');
                    var newdata = $.extend(true,[],row); //复制一份数据
                    row.zysl=$("#zysl"+row.hpkcid).val();
                    if(row.zysl>row.kydsl){
                        alert("不可大于可用库存数量");
                    }else if(!(/(^[1-9]\d*$)/.test(row.zysl))) {
                        alert("请输入一个正整数");

                    } else if(0<row.zysl<=row.kydsl){
                        $table1.bootstrapTable("append",row);
                    }else{
                        alert("请输入大于0正整数");
                    }
                }
            },
            queryParams: function () {//查询条件
                return zzpUtils.getFormJson($("#form1"));
            },
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            }
        });
        //控制数量
        function operateFormatterNumber (value,row,index) {
            return [
                '<input type="number" class="layui-input" id="zysl'+row.hpkcid+'" value="'+ 1 +'"   min="1" step="1"   style="width:80px;    height: 30px;"/>'
                /* '<input type="text" id="pdsl'+row.id+'"  name="pdsl" value="'+ value +'" style="width:80px;"/>',*/
            ].join('')
        }
        //查询条件
        $(".inline-search-btn").on('click', function () {
            zzpUtils.refreshTable("#table");
        });
        var $table1 = zzpUtils.table({
            elem: '#table1',
            isApi: true,
            pagination:false,
            showColumns: false,
            url: '[{}]',
            columns: [
                 {
                    field: 'hpbh',
                    title: '货品编号',
                },{
                    field: 'hpmc',
                    title: '货品名称',
                },{
                    field: 'dwms',
                    title: '单位',
                },{
                    field: 'hpph',
                    title: '货品批次',
                },{
                    field: 'hpscrq',
                    title: '生产日期',
                },{
                    field: 'show_kwid',
                    title: '库位',
                },{
                    field: 'zysl',
                    title: '出库数量',
                },{
                    field:'caozuo',
                    title: '操作',
                    events: operateEvent,
                    formatter: operateFormatter
                }],
            detailFormatter: function (index , row) {
                return "这里就没有确定过11";
            },
        });

        //  供应商编号的下拉选中触发
        form.on('select(clientBh)', function (data) {
            if (data.value) {
                var supplierSelect = data.value;
                for (var i = 0; i < supplierInf.length; i++) {
                    var item = supplierInf[i];
                    if (item.khbh === supplierSelect) {
                        $('#supName').text(item.khmc);
                        $('#supMan').text(item.lxrdh);
                        $('#supPhone1').text(item.lxrname);
                        $('#supPhone2').text(item.khdz);
                        $('#supFaxse').text(item.sheng);
                        $('#supState').text(item.shi);
                        $('#khid').text(item.id);
                        $('#suppplierDetail').css('display', 'block');

                        break;
                    }
                }
                // 重新渲染form，否则新的option不显示
                form.render();
            }
        })
        //初始化日期
        zzpUtils.webSocket.init();
        laydate.render({
            elem: '#scrq',
            type: 'date',
            range: '~',
            done: function(value, date, endDate){
                if(value!=null && value!=""){
                    var start=value.toString().substring(0,value.toString().indexOf("~"));
                    var end=value.toString().substring(value.toString().indexOf("~")+1);
                    $("#hpscrq_start").val(Date.parse(new Date(start)));
                    $("#hpscrq_end").val(Date.parse(new Date(end)));
                }else {
                    $("#hpscrq_start").val("");
                    $("#hpscrq_end").val("");
                }

                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });
        //table1行内表格处理
        function operateFormatter(value, row, index) {
            return [
                '<a class="layui-btn layui-btn-xs layui-btn-danger deleteRow" >删除</a>'
            ].join('')
        }


        form.on("submit(add)",function(data){
            var field = data.field;
            zzpUtils.confirm("是否确定添加",function(index){
                //获取table数据
                var TableData = $table1.bootstrapTable('getData');
                var SaveData = {};
                if (TableData.length > 0) {
                    var newTableData = [];
                    TableData.forEach(function (item) {
                        var items={
                            OldNumber_kydsl:item.zysl,
                            dwms:item.dwms,
                            zysl:item.zysl,
                            hpbh:item.hpbh,
                            hpkcid:item.hpkcid,
                            hpmc:item.hpmc,
                            hpph:item.hpph,
                            hpscrq:item.hpscrq,
                            kydsl:item.kydsl,
                            show_kwid:item.show_kwid,
                            zxl:item.zxl

                        }
                        console.log(items);
                        newTableData.push(items);
                    });
                    SaveData.fybh = field.fybh;// 发运编号
                    SaveData.fylx = field.POtype;// 订单类型
                    SaveData.khbh = field.clientBh;// 客户编号
                    SaveData.khdz = field.khdz;// 客户地址
                    SaveData.khid = $('#khid').text();// 客户id
                    SaveData.khmc = $('#supName').text();//客户名称
                    SaveData.lxrdh = $('#supMan').text();//联系人电话
                    SaveData.lxrxm = $('#supPhone1').text();//联系人姓名
                    SaveData.sheng = $('#supFaxse').text();//省
                    SaveData.shi = $('#supState').text();//市
                    SaveData.xlmc = '全国';
                    SaveData.yxj = field.yxj;
                    SaveData.wmsQuickExitDetailedList = newTableData;
                    console.log(SaveData);

                    $.ajax({
                        url: '/zxsdwms/wmsquickexit/add',
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(SaveData),
                        success: function (data) {
                            layer.msg(data.title);
                            if (data.type === 'success') {
                                setTimeout(function(){
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                   // top.layer.msg(data.message);
                                },500);
                            }
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    })
                } else {
                    layer.msg('您还不能保存，采购订单明细为必填项');
                }
            })
            return false;
        })

    });

</script>
</html>